<template>
  <div class="list">
    <div class="text-right">
      <el-button type="primary" size="small" @click="add">添加公告</el-button>
    </div>
    <el-table v-loading="loading" border :data="tableData" class="mt20">
      <el-table-column
        align="center"
        prop="id"
        label="公告id"
      />
      <el-table-column
        prop="title"
        label="公告标题"
      />
      <el-table-column
        align="center"
        prop="creatorName"
        label="创建人"
      />
      <el-table-column
        align="center"
        prop="action"
        label="操作"
      >
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, total,sizes,jumper"
        :current-page="pageNo"
        :total="total"
        :disabled="loading"
        @current-change="searchByPage"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { announcementList, announcementDel } from '@/api'
export default {
  name: 'AnnouncementList',
  data() {
    return {
      loading: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchByPage(pageNo) {
      this.pageNo = pageNo
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.searchByPage(1)
    },
    async getList() {
      if (this.loading) return
      this.loading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      await announcementList(params).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.pagination.total
          return
        }
        this.tableData = []
        this.total = 0
      })
      this.loading = false
    },
    add() {
      this.$router.push('/announcement/edit')
    },
    edit(row) {
      this.$router.push({
        path: '/announcement/edit',
        query: {
          id: row.id
        }
      })
    },
    del(row) {
      const that = this
      this.$confirm('确定删除该公告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await announcementDel({ id: row.id }).then(res => {
            if (res.code === 0) {
              that.$message.success('删除成功')
              that.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }
  }
}
</script>

